<template>
	<view class="cloummStart w100" style="height: 100vh;">
		<view style="background: var(--themeBackground);" class="w100">
			<appBar title="佣金结算审核" rightIcon="search" :showRight="true" @rightClick="search">
			</appBar>
			<tabsComponent @handleTabClick="click" :list="list" />
		</view>
		<view class="w100" style="overflow-y: auto;">
			<view v-for="(item,index) in listData" :key="index" style="margin: 20rpx auto;" class="cardContiner select"
				@click="active(index)" :class="{'selectActive': ids.includes(index) && activeIndex == 0}">
				<auditItemVue :items="item">
				</auditItemVue>
			</view>
		</view>
		<view class="w100 bottom" v-show="activeIndex == 0">
			<view class="rowSpaceBetween">
				<view class="rowStart" style="gap: 20rpx;">
					<uv-checkbox-group @change="change" v-model="checkVal">
						<uv-checkbox activeColor="#fb5f46" iconColor="#fff" :label="checkbox.name"
							:name="checkbox.value"></uv-checkbox>
					</uv-checkbox-group>
					<view class="cardUnit" style="color: var(--themeFontColor2);">
						已选：{{ids.length}}项
					</view>
				</view>
				<view class="rowStart" style="gap: 20rpx;">
					<ThemeButton type="primary" :plain="true" text="驳回" ></ThemeButton>
					<ThemeButton type="primary" text="通过" ></ThemeButton>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import tabsComponent from '@/components/tabsComponent/tabsComponent.vue';
	import auditItemVue from './auditItem.vue';
	export default {
		components: {
			auditItemVue,
			tabsComponent
		},
		data() {
			return {
				ids: [],
				activeIndex: 0,
				list: [{
						name: '待审核',
					},
					{
						name: '合伙人',
					},
					{
						name: '代理商',
					},
				],
				listData: [{
					name: '陈倩',
					status: '0',
					createTime: '2024-12-03 10:13:52',
					money: '192.89元',
					fee: '15.43元',
					agent: '代理商'
				}, {
					name: '陈倩',
					status: '1',
					createTime: '2024-12-03 10:13:52',
					money: '192.89元',
					fee: '15.43元',
					agent: '代理商'
				}, {
					name: '陈倩',
					status: '2',
					createTime: '2024-12-03 10:13:52',
					money: '192.89元',
					fee: '15.43元',
					agent: '代理商'
				}, {
					name: '陈倩',
					status: '2',
					createTime: '2024-12-03 10:13:52',
					money: '192.89元',
					fee: '15.43元',
					agent: '代理商'
				}, {
					name: '陈倩',
					status: '2',
					createTime: '2024-12-03 10:13:52',
					money: '192.89元',
					fee: '15.43元',
					agent: '代理商'
				}, {
					name: '陈倩',
					status: '2',
					createTime: '2024-12-03 10:13:52',
					money: '192.89元',
					fee: '15.43元',
					agent: '代理商'
				}, ],
				checkVal: [],
				checkbox: {
					name: '全选',
					value: true
				}
			};
		},
		mounted() {},
		watch: {
			ids: {
				handler(newVal, oldVal) {
					if (newVal.length === this.listData.length) {
						this.checkVal = [true];
					} else {
						this.checkVal = [];
					}
				},
				deep: true
			}
		},
		methods: {
			change(e) {
				if (e[0]) {
					this.ids = this.listData.map((item, index) => {
						return index
					})
				} else {
					this.ids = []
				}
			},
			search() {
				uni.navigateTo({
					url: '/pages/tabbar/mine/page/moneySearch/moneySearch'
				})
				console.log('search');
			},
			click(e) {
				this.activeIndex = e.index;
				console.log('click', this.activeIndex);
			},
			active(index) {
				if (this.activeIndex == 0) {
					if (this.ids.includes(index)) {
						// 如果数组中已包含该 index，移除它
						this.ids = this.ids.filter(id => id !== index);
					} else {
						// 如果数组中没有该 index，添加它
						this.ids.push(index);
					}
				} else {
					uni.navigateTo({
						url: '/pages/tabbar/mine/page/moneyAuditInfo/moneyAuditInfo'
					})
				}

			}

		}
	}
</script>
<style lang="scss" scoped>
	.bottom {
		padding: 40rpx 20rpx;
		box-sizing: border-box;
		background-color: #fff;

	}
</style>